<template>
  <div class="display-card">

  </div>
  <el-card>
    <template #header>
      <div class="card-header">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-input v-model="searchData" clearable placeholder="请数据查询条件"/>
          </el-col>
          <el-button icon="Search" type="primary" @click="handleSearch">搜索</el-button>
          <el-button icon="Plus" type="primary" @click="handleInsert">添加</el-button>
        </el-row>
      </div>
    </template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="日期" prop="date" width="150"/>
      <el-table-column label="名称" prop="name" width="120"/>
      <el-table-column label="状态" prop="state" width="120"/>
      <el-table-column label="城市" prop="city" width="120"/>
      <el-table-column label="地址" prop="address" width="600"/>
      <el-table-column label="编码" prop="zip" width="120"/>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default>
          <el-button size="small" type="success" @click="handleLook">查看</el-button>
          <el-button size="small" type="primary" @click="handleEdit">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <!--      <blog-page page-data="pageData"></blog-page>-->
    </div>
  </el-card>
  <dialog-form :dialog-data="dialogData"></dialog-form>
</template>

<!-- row中的 gutter 属性意为将一行划分为n个分栏，然后在col属性中通过span值去占据一部分 ，element默认将一行row划分为24份-->
<script lang="ts" setup>
import {ref} from "vue";
import DialogForm from "@/components/Dialog/DialogForm.vue"
import {useStore} from "@/store/modules/user";
import {storeToRefs} from "pinia";
import {ElMessage, ElMessageBox} from "element-plus";

const dialogData = ref({
  data: {}
})

// const pageData = ref<PageInfo>({
//   pageSize: 1,
//   currentPage: 1,
//   total: 20
// })

const store = useStore()
const refStore = storeToRefs(store)

const searchData = ref("")

const handleSearch = () => {
  console.log('handleSearch')
}

const handleInsert = () => {
  store.setDialogFormVisible(true)
  console.log('handleInsert', refStore.dialogFormVisible.value)
}

const handleLook = () => {
  // 设置store中的值还是推荐使用actions
  store.setDialogFormVisible(true)
  console.log('handleLook', refStore.dialogFormVisible.value)
}

const handleEdit = () => {
  // 设置store中的值还是推荐使用actions
  store.setDialogFormVisible(true)
  console.log('handleEdit', refStore.dialogFormVisible.value)
}

const handleDelete = () => {
  ElMessageBox.confirm(
      '你选中的当前数据将被删除. 是否继续?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '删除已取消',
        })
      })
  console.log('delete')
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
]
</script>

<style lang="less" scoped>
.display-card {
  width: 100px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.page {
  margin-top: 20px;
}
</style>